<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>文章列表</span>
            </div>
            <!-- 搜索区域 -->
            <div class="search-box">
                <el-form :inline="true" :model="q">
                    <el-form-item label="文章分类">
                        <el-select v-model="q.cate_id" placeholder="请选择分类" size="small">
                            <el-option :label="item.cate_name" :value="item.id" v-for="item in cateList" :key="item.id">
                            </el-option>

                        </el-select>
                    </el-form-item>
                    <el-form-item label="发布状态" style="margin-left: 15px;">
                        <el-select v-model="q.state" placeholder="请选择状态" size="small">
                            <el-option label="已发布" value="已发布"></el-option>
                            <el-option label="草稿" value="草稿"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="initArtListFn">筛选</el-button>
                        <el-button type="info" size="small" @click="resetListFn">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 发表文章的按钮 -->
                <el-button type="text" @click="showPubDialogFn" class="btn-pub">发表文章</el-button>
                <!-- 发表文章的 Dialog 对话框 -->
                <el-dialog title="发表文章" :visible.sync="pubDialogVisible" fullscreen :before-close="handleClose"
                    @closed="onDialogClosedFn">
                    <!-- 发布文章的对话框 -->
                    <el-form :model="pubForm" :rules="pubFormRules" ref="pubFormRef" label-width="100px">
                        <el-form-item label="文章标题" prop="title">
                            <el-input v-model="pubForm.title" placeholder="请输入标题"></el-input>
                        </el-form-item>
                        <el-form-item label="文章分类" prop="cate_id">
                            <el-select v-model="pubForm.cate_id" placeholder="请选择分类" style="width: 100%;">
                                <!-- 循环渲染分类的可选项 -->
                                <el-option :label="item.cate_name" :value="item.id" v-for="item in cateList"
                                    :key="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 文章内容 -->
                        <el-form-item label="文章内容" prop="content">
                            <!-- 使用 v-model 进行双向的数据绑定 -->
                            <quill-editor v-model="pubForm.content"></quill-editor>
                        </el-form-item>
                        <!-- 文章封面 -->
                        <el-form-item label="文章封面">
                            <!-- 用来显示封面的图片 -->
                            <img src="../../assets/images/cover.jpg" alt="" class="cover-img" ref="imgRef" />
                            <br />
                            <!-- 文件选择框，默认被隐藏 -->
                            <input type="file" style="display: none;" accept="image/*" ref="iptFileRef"
                                @change="onCoverChangeFn" />
                            <!-- 选择封面的按钮 -->
                            <el-button type="text" @click="chooseImgFn">+ 选择封面</el-button>
                        </el-form-item>
                        <!-- 文章发布状态按钮 -->
                        <el-form-item>
                            <el-button type="primary" @click="pubArticleFn('已发布')">发布 </el-button>
                            <el-button type="primary" @click="pubArticleFn('草稿')">保存为草稿</el-button>
                        </el-form-item>
                    </el-form>

                </el-dialog>
            </div>

            <!-- 文章表格区域 -->
            <el-table :data="artList" style="width: 100%;" border stripe>
                <el-table-column label="文章标题" prop="title">
                    <template v-slot="{row}">
                        <el-link type="primary" @click="showDetailFn(row.id)">{{row.title}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="分类" prop="cate_name"></el-table-column>
                <el-table-column label="发表时间" prop="pub_date">
                    <template v-slot="{row}">
                        <span>{{$formatDate(row.pub_date)}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态" prop="state"></el-table-column>
                <el-table-column label="操作"><template v-slot="{row}">
                   <el-button type="danger" size="mini" @click="removeFn(row.id)">删除</el-button>
                </template></el-table-column>
            </el-table>
            <!-- 查看文章详情的对话框 -->
            <el-dialog title="文章预览" :visible.sync="detailVisible" width="80%">
                <h1 class="title">{{ artDetail.title }}</h1>

                <div class="info">
                    <span>作者：{{ artDetail.nickname || artDetail.username }}</span>
                    <span>发布时间：{{ $formatDate(artDetail.pub_date) }}</span>
                    <span>所属分类：{{ artDetail.cate_name }}</span>
                    <span>状态：{{ artDetail.state }}</span>
                </div>

                <!-- 分割线 -->
                <el-divider></el-divider>

                <!-- 文章的封面 -->
                <img :src="baseURL + artDetail.cover_img" alt="" />

                <!-- 文章的详情 -->
                <div v-html="artDetail.content" class="detail-box"></div>
            </el-dialog>
            <!-- 分页区域 -->
            <el-pagination @size-change="handleSizeChangeFn" @current-change="handleCurrentChangeFn"
                :current-page.sync="q.pagenum" :page-sizes="[2, 3, 5, 10]" :page-size.sync="q.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>
  
<script>
import { getArtCateListAPI, uploadArticleAPI, getArticleListAPI, getArticleDetailAPI ,delArticleAPI} from '@/api'
//引入基地址
import { baseURL } from '@/utils/request'
// 导入默认的封面图片
import defaultImg from '@/assets/images/cover.jpg'


export default {
    name: 'ArtList',
    data() {
        return {
            baseURL,//基地址
            pubDialogVisible: false,//发表文章弹框
            detailVisible: false,//获取文章详情弹框
            artDetail: {},//文章的详情对象
            // 查询参数对象
            q: {
                pagenum: 1,
                pagesize: 2,
                cate_id: '',
                state: ''
            },
            cateList: [],//文章的分类数据
            artList: [],//文章的列表数据
            total: 0,//总数据条数

            //表单的数据对象
            pubForm: {
                title: '',
                cate_id: '',
                content: '',
                cover_img: null,
                state: ''//文章的发布状态：草稿、已发布

            },
            pubFormRules: { //表单的验证规则对象
                title: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' },
                    { min: 1, max: 30, message: '文章标题的长度为1-30各字符', trigger: 'blur' }
                ],
                cate_id: [{ required: true, message: '请选择文章标题', trigger: 'blur' }],
                content: [
                    { required: true, message: '请输入文本内容', trigger: 'blur' }
                ]

            },

        }
    },
    created() {
        this.initCateList(),
            this.initArtListFn()
    },
    methods: {
        showPubDialogFn() {
            this.pubDialogVisible = true
        },
        async handleClose(done) {
            const confirmResult = await this.$confirm('此操作将导致文章信息丢失, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'

                //await只能捕获成功的消息
                //捕获取消框的拒绝值传出来的字符串
            }).catch(err => err)
            //
            if (confirmResult === 'cancel') return
            // 确认关闭
            done()
        },
        //初始化文章分类数据
        async initCateList() {
            const { data: res } = await getArtCateListAPI()
            if (res.code === 0) {
                this.cateList = res.data
            }
        },
        //获得上传封面点击事件
        chooseImgFn() {
            // this.$refs拿到的是DOM下的input原生属性
            this.$refs.iptFileRef.click()
        },
        //再选者框中触发改变事件
        // 监听文件选择框的 change 事件
        onCoverChangeFn(e) {
            // 获取到用户选择的封面
            const files = e.target.files
            if (files.length === 0) {
                // 用户没有选择封面
                this.pubForm.cover_img = null
                this.$refs.imgRef.setAttribute('src', defaultImg)
            } else {
                // 用户选择了封面
                this.pubForm.cover_img = files[0]
                const url = URL.createObjectURL(files[0])
                this.$refs.imgRef.setAttribute('src', url)
            }
        },
        //完成发布/草稿功能，判断发布内容是草稿还是正式文章
        pubArticleFn(state) {
            //设置发布状态
            this.pubForm.state = state
            //2.表单验证
            this.$refs.pubFormRef.validate(async valid => {
                if (!valid) return this.$message.error('还没写完就想走？')
                //判断是否提供表单封面
                if (!this.pubForm.cover_img) return this.$message.error('脸都不要脸？')
                //创建FormDdate对象
                const fd = new FormData()
                //向FormData中追加数据
                Object.keys(this.pubForm).forEach((key) => {
                    fd.append(key, this.pubForm[key])
                })
                //发起请求
                const { data: res } = await uploadArticleAPI(fd)

                if (res.code !== 0) return this.$message.error('发布文章失败')
                this.$message.success('发布文章成功')
                //关闭对话框
                this.pubDialogVisible = false
                // TODO：刷新文章列表数据
                //发布文章后重置到数据列表首页
                this.resetListFn()
            })
        },
        //关闭弹框清楚数据
        onDialogClosedFn() {
            //清空所填数据
            this.$refs.pubFormRef.resetFields()
            //清空不是表单绑定的数据
            this.pubForm.content = ''
            this.$refs.imgRef.setAttribute('src', defaultImg)
        },
        //初始化文章列表
        async initArtListFn() {
            const { data: res } = await getArticleListAPI(this.q)
            // console.log(res);
            if (res.code !== 0) return this.$message.error('获取文章失败')
            this.artList = res.data
            this.total = res.total
        },
        // pageSize 发生了变化
        handleSizeChangeFn(newSize) {
            // 为 pagesize 赋值
            this.q.pagesize = newSize
            // 默认展示第一页数据
            this.q.pagenum = 1
            // 重新发起请求
            this.initArtListFn()
        },
        // 页码值发生了变化
        handleCurrentChangeFn(newPage) {
            // 为页码值赋值
            this.q.pagenum = newPage
            // 重新发起请求
            this.initArtListFn()
        },
        //重置功能
        resetListFn() {
            //重置查询对象
            this.q = {
                pagenum: 1,
                pagesize: 2,
                cate_id: '',
                state: ''
            },
                //重新发起请求
                this.initArtListFn()
        },
        //获取文章详情
        async showDetailFn(id) {
            const { data: res } = await getArticleDetailAPI(id)
            if (res.code !== 0) return this.$message.error('文章获取失败')
            this.artDetail = res.data
            // 展示对话框
            this.detailVisible = true
        },
        //删除文章
        async removeFn(id){
            //询问是否需要删除
            const confirmResult = await this.$confirm('你将失去我哦','提示',{
                confirmButtonText:'确定',
                cancelButtonText:'取消',
                type:'warning'
            }).catch(err=>err)
            //取消删除
            if(confirmResult === 'cancel') return
            //执行删除操作
            const {data:res} = await delArticleAPI(id)
            console.log(res);
            if (res.code !== 0) return this.$message.error('删除失败!')
            this.$message.success('删除成功!')
            //刷新列表数据
            this.resetListFn()
        }

    }
}
</script>
  
<style lang="less" scoped>
.search-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .btn-pub {
        margin-top: 5px;
    }
}

//设置富文本编辑器的默认最小高度
//
::v-deep .ql-editor {
    min-height: 300px;
}

// 设置图片封面的宽高
.cover-img {
    width: 400px;
    height: 280px;
    object-fit: cover;
}

.el-pagination {
    margin-top: 15px;
}
.title {
  font-size: 24px;
  text-align: center;
  font-weight: normal;
  color: #000;
  margin: 0 0 10px 0;
}

.info {
  font-size: 12px;
  span {
    margin-right: 20px;
  }
}

// 修改 dialog 内部元素的样式，需要添加样式穿透
::v-deep .detail-box {
  img {
    width: 500px;
  }
}
</style>
  